<template>
  <div>
         <button @click="back()">back(leave)</button>
         <button @click="al(3333)">3333(update)</button>
  </div>
</template>

<script>
  export default {
    name: "child",
    data() {
      return {
        a: ''
      }
    },
    //进入次级路由(新路由)时：
    beforeRouteEnter(to, from, next) {
      console.log('进入enter路由钩子');
      console.log(to);
      next();
    },
    //进入其他路由/返回上级路由时：
    beforeRouteLeave(to,from,next){
      console.log('进入leave路由钩子');
      next();//不执行next将无法再触发后回退，必须再次点击。
    },
    //切换同级路由时：
    beforeRouteUpdate(to, from, next) {
      console.log('进入update路由钩子');
      console.log(to.params.id);
      next();
    },
    methods:{
        back() {
            //this.$router.back(-1);
            //this.$router.go(-1);
            this.$router.push('/');
        },
        al(id) {
            this.$router.push(`/child/${id}`);
        },
    },  
  }
</script>

<style scoped>

</style>
